<template>
  <view v-if="pictures && pictures.length" class="product-swiper-wrapper">
    <swiper 
      class="product-swiper image-with-placeholder" 
      interval="3000" 
      autoplay
      @change="currentChange">

      <swiper-item class="swiper-item" v-for="(picture, index) in pictures" :key="index" @tap="handleClick(picture)" >
        <image class="swiper-image image-with-placeholder" :src="picture" mode="aspectFill"/>
      </swiper-item>
    </swiper>

    <!-- 指示点 -->
    <view class="indicator-dots">
      <span 
        class="indicator-dot" 
        v-for="(item, index) in pictures" 
        :key="index" 
        :class="[activeIndex === index ? 'active' : '']" />
    </view>
  </view>
</template>
<script>
  import sdk from 'sdk'
  export default {
    name: 'product-swiper',

    props: {
      pictures: {
        type: Array,
        default: () => []
      }
    },

    data() {
      return {
        activeIndex: 0
      }
    },

    methods: {
      currentChange(e) {
        let {current} = e.detail || {}
        this.activeIndex = current
      },
      handleClick(item) {
        sdk.navigateTo({url: item.forwardUrl})
      }
    }
  }
</script>
<style lang="less">
.product-swiper-wrapper {
  position: relative;

  .product-swiper {
    overflow: hidden;
    height: 463rpx;
  }

  .swiper-item {
    position: relative;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
  }

  .indicator-dots {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 74rpx;
    font-size: 0;
    z-index: 2;

    .indicator-dot {
      font-size: 0;
      border: 7rpx solid rgba(255,255,255, 0.4);
      border-radius: 100%;
      margin: 4rpx;

      &.active {
        border-color: #ffffff;
      }
    }
  }
}
</style>